<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- <%@include file="../../common/taglib.jsp"%> --%>
<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title"></h3>
			</div>
			<!-- /.box-header -->
			<div class="box-body" id="listUI">
				<div class="clearfix">
				  <div class="row">	
					  <!-- 添加银行卡的操作 -->
						<div class="col-md-2 form-group">
							<button type="submit" id="addCardBtn" class="btn btn-info" style="height: 40px; vertical-align: top;">添加银行卡</button>
						</div>
						<div class="form-group col-md-3" >
							<div class="input-group">
								<span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" class="form-control" id="bankAccountNo" placeholder="银行卡卡号"> 
							</div>
						</div>
						<div class="col-md-3">
							<button type="button" id="searchCard" class="btn btn-primary">搜索</button>
						</div>
			      </div>	
				</div>
				
				<!-- 表格的初始化 -->	
				<table id="pageTableCard" class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>银行名称</th>
							<th>银行编号</th>
							<th>卡号</th>
							<th>省份</th>
							<th>开户支行</th>
							<th>开户名</th>
							<th>是否设为默认</th>
							<th>审核状态</th>
							<th>操作</th>
						</tr>
					</thead>
				</table>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>
<!-- DataTables -->
<%@include file="./add.jsp" %>
<%@include file="./bankInfo.jsp" %>
<%@include file="./edit.jsp" %>
<%@include file="./modal.jsp" %>
<script src="${baseURL }/lte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${baseURL }/lte/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script>
	/* ==========添加银行卡的dialog=========== */
	$("#addCardBtn").on("click",function(){
		 $('#addBankCardDialog').modal('show');
		 $("#addBankCardDialog #msg_code").hide();
	});

	
	/* ========点击搜索调用========== */
	$("#searchCard").on("click", function() {
		searchCard();
	});
	
	
	/* ========加载时,加载表格========== */
	$(function() {
		searchCard();
	});
	

	/* ========表格的初始========== */
function searchCard() {
	if (oTableRemit == null) { //仅第一次检索时初始化Datatable     
		$("#pageTableCard").show();
		oTableRemit = $('#pageTableCard')
		.dataTable(
				{
					"bAutoWidth" : false, //不自动计算列宽度     

					"columns" : [ {
						"data" : "bankName"
					},{
						"data" : "bankCode"
					}, {
						"data" : "bankAccountNo"
					}, {
						"data" : "province"
					},{
						"data" : "bankChannelName"
					}, {
						"data" : "bankAccountName"
					}, {
						"data" : "isDefaultDesc"
					}, {
						"data" : "isAuditDesc"
					}, {
						"data" : null
					} ],
					"bProcessing" : true, //加载数据时显示正在加载信息     
					"bServerSide" : true, //指定从服务器端获取数据     
					"bFilter" : false, //不使用过滤功能     
					"bLengthChange" : false, //用户不可改变每页显示数量     
					"iDisplayLength" : 10, //每页显示10条数据     
					"sAjaxSource" : "${baseURL}/merchant/bank/ajaxBankCardList",//获取数据的url     
					"fnServerData" : retrieveData, //获取数据的处理函数     
					"sPaginationType" : "full", //翻页界面类型     
					"searching" : false,
					"ordering" : false,
					"oLanguage" : { //汉化     
						"sZeroRecords" : "没有检索到数据",
						"sInfo" : "总共有 _TOTAL_ 条记录",
						"sInfoEmtpy" : "没有数据",
						"sProcessing" : "正在加载数据...",
						"oPaginate" : {
							"sFirst" : "首页",
							"sPrevious" : "前一页",
							"sNext" : "后一页",
							"sLast" : "尾页"
						}
					},
					"columnDefs" : [ {
						"targets" : -1,
						"data" : null,
						"render" : function(data) {
							console.log(data);
							if (data.isAudit == 'CONFIRMED' && data.isDefault == 'YES') {
								return "";
							}else if (data.isAudit == 'CONFIRMED' && data.isDefault == 'NO'){
								return '<a class="btn btn-xs btn-primary btn-del" onclick="defaultCardBtn(\''
								+ data.id + '\')">设为默认</a>		<a class="btn btn-xs btn-primary btn-del"  onclick="deleteCardBtn(\''
								+ data.id + '\')">删除</a>'
							}else if (data.isAudit == 'CANCEL_FAIL' && data.status == 'ACTIVE'){
								return '<a class="btn btn-xs btn-primary btn-del" id="editCardBtn" onclick="editCardBtn(\''
								+ data.id + '\')">修改</a>		<a class="btn btn-xs btn-primary btn-del"  onclick="deleteCardBtn(\''
								+ data.id + '\')">删除</a>'
							}else if(data.isAudit == 'WAIT_CONFIRM'){
								return "";
							}else{
								return "";
							}
						}
					} ]
				});
	}
	/* 只有当审核不通过的时候才可以修改 */
	/*审核通过并且设为默认   无任何操作*/
	/*审核中   无任何操作*/
	//刷新Datatable，会自动激发retrieveData    
	oTableRemit.fnDraw();//插件生成表格的时候调用该方法
}
	
	/*===========表格的处理方法，把搜索参数重新带到后台============*/
	function retrieveData(sSource, aoData, fnCallback) {
		aoData.push({
			"name" : "bankAccountNo",
			"value" : $('#listUI #bankAccountNo').val()
		});
		$.ajax({
			"type" : "POST",
			"contentType" : "application/json",
			"url" : sSource,
			"dataType" : "json",
			"data" : JSON.stringify(aoData), //以json格式传递     
			"success" : function(resp) {
				/* alert(JSON.stringify(resp)); */
				fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式    
			}
		});
	}
	
	var oTableRemit = null;

</script>